<template>
  <div class="contianer">
    <div :class="userBaseSetUp.communityOpenUserList == 1 ? 'mess2' : 'mess'" ref="mess">
      <!-- 菜单弹出框 -->
      <vue-context-menu :contextMenuData="contextMenuData" @delete="deleteComment"></vue-context-menu>
      <vue-context-menu :contextMenuData="userMenuData" @callOne="callOne"></vue-context-menu>
      <!--  -->
      <div :class="userBaseSetUp.communityOpenUserList == 1 ? 'messDiv2' : 'messDiv'">
        <table class="messTable" style="width: 60%;" v-for="(item, index) in communitys" :key="item.id + '' + index">
          <tr>
            <div v-if="isCommunitysCreatedTime(index, communitys)" style="text-align: center;margin-top: 30px;">
              <span class="text" style="border-radius: 1px;padding-left:3px;padding-right: 3px;">{{
                communitysCreatedTime(communitys[index]) }}</span>
            </div>
          </tr>
          <tr>
            <td>
              <div class="commentMess">
                <!-- 头像 -->
                <div @contextmenu="userMenu(item.uid)" @mousedown="lookUserMenu(item.uid, $event)"
                  :class="item.uid == MyCommentSend.uid ? 'commontImg rigthText' : 'commontImg leftText'">
                  <span>{{ item.nickName }}</span>
                  <el-image :src="item.avatar ? item.avatar : squareUrl" style="pointer-events: none;"></el-image>
                </div>
                <!-- 文本 -->
                <div v-if="item.type == 0" @contextmenu="showMenu(item.id, item.uid)"
                  :class="item.uid === MyCommentSend.uid ? 'commontText rigthText' : 'commontText leftText'">
                  <span class="text">{{ item.content }}</span>
                </div>
                <!-- 图片 -->
                <div @contextmenu="showMenu(item.id, item.uid)" v-if="item.type == 1"
                  :class="item.uid === MyCommentSend.uid ? 'rigthImg' : ' leftImg'"
                  style=" width: 100px;object-fit: contain;">
                  <el-image style="object-fit: contain;" :src="item.content" :preview-src-list="[item.content]">
                  </el-image>
                </div>
                <!-- 文件 -->
                <div @contextmenu="showMenu(item.id, item.uid)" v-if="item.type == 2"
                  :class="item.uid === MyCommentSend.uid ? ' rigthText' : ' leftText'">
                  <!-- <span class="text">{{ item.fileName }}</span> -->
                  <el-button style="background-color: rgb(239, 182, 132);width: 170px;" @click="uploadFile(item.content)">
                    <p class="el-icon-folder-opened"></p>:{{ fileName(item.fileName) }}
                  </el-button>
                </div>
                <!-- 撤回消息 -->
                <div v-if="item.type == -1" style="text-align: center;">
                  <span class="text"
                    style="background-color: #cccccc;border-radius: 1px;padding-left:3px;padding-right: 3px;">该消息已撤回</span>
                </div>
                <!-- 管理员撤回 -->
                <div v-if="item.type == -2" style="text-align: center;">
                  <span class="text"
                    style="background-color: #cccccc;border-radius: 1px;padding-left:3px;padding-right: 3px;">该消息存在违规信息，已被管理员撤回</span>
                </div>
              </div>
            </td>

          </tr>
        </table>

      </div>


    </div>

    <div class='usetListDiv' v-if="userBaseSetUp.communityOpenUserList">
      <div v-if="myUserType != 0">
        <el-table class="communitysInformation" height="550" :default-sort="{ prop: 'speakNum', order: 'descending' }"
          :data="allUserList.filter(data => !search || data.nickName.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%">
          <el-table-column label="用户" prop="date" width="40">
            <template slot-scope="scope">
              <el-image :src="scope.row.avatar" class=" tableImg" v-if="scope.row.avatar"></el-image>
              <div class="tableNoImg el-icon-picture-outline " v-else>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickName">
            <template slot="header" slot-scope="scope">
              <el-button type="success" @click="userUpdateUserList"><span class="el-icon-refresh"></span>刷新</el-button>
            </template>
          </el-table-column>
          <el-table-column label="活跃度" prop="speakNum" width="88" sortable>
          </el-table-column>
          <el-table-column align="right" width="150">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="!scope.row.ban" type="danger"
                plain>禁言</el-button>
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-else type="danger">解除</el-button>
              <el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)" disabled>踢出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="communitysInformation" v-else>
        <el-table height="550" :default-sort="{ prop: 'speakNum', order: 'descending' }"
          :data="allUserList.filter(data => !search || data.nickName.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%">
          <el-table-column prop="date" width="40">
            <template slot-scope="scope">
              <el-image :src="scope.row.avatar" class=" tableImg" v-if="scope.row.avatar"></el-image>
              <div class="tableNoImg el-icon-picture-outline " v-else>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickName">
            <template slot="header" slot-scope="scope">
              <el-button type="success" @click="userUpdateUserList"><span class="el-icon-refresh"></span>刷新</el-button>
            </template>
          </el-table-column>
          <el-table-column label="活跃度" prop="speakNum" width="100" sortable>
          </el-table-column>
          <el-table-column align="right" width="150">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="lookUserMenu(scope.row.id, $event)" v-if="!scope.row.ban" type="info"
                plain>查看信息</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>



    <div :class="userBaseSetUp.communityOpenUserList == 1 ? 'sendCount2' : 'sendCount'">
      <el-popover placement="top" width="500" trigger="click" class="popover">
        <div class="imgUpload">
          <el-upload class="upload-demo" ref="upload" action="api/util/uploadImg" name="imgFile" :headers="uploadHeaders"
            :before-upload="beforeUpload" :on-success="onSuccess" :on-preview="handlePreview"
            :before-remove="handleRemove" :file-list="fileList" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">发送</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div>
          </el-upload>
        </div>
        <el-button slot="reference" style="background-color:rgb(104, 181, 244);">图片</el-button>
      </el-popover>

      <el-popover placement="top" width="500" trigger="click" class="popover" v-if="myUserType != 0">
        <div class="imgUpload">
          <el-upload class="upload-demo" ref="uploadFile" action="api/util/uploadFile" name="uploadFile" :headers="uploadHeaders"
            :before-upload="fileBeforeUpload" :on-success="onSuccessFile" :on-preview="handlePreview"
            :before-remove="handleRemoveFile" :file-list="fileList" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadFile">发送</el-button>
            <div slot="tip" class="el-upload__tip">上传的格式全转化为文件，大小不能超过1G</div>
          </el-upload>
        </div>
        <el-button slot="reference" style="background-color:rgb(254, 206, 74);">文件</el-button>
      </el-popover>

      <el-input v-model="MyCommentSend.content" placeholder="域名已备案，希望大家文明发言，免除我被封号的风险..." class="sendInput"
        @keyup.enter.native="sendInput"></el-input>
      <el-button type="primary" @click="sendInput">发送</el-button>
      <!-- <el-button type="warning" @click="userUpdateUserList" plain v-if="myUserType != 0">刷新列表</el-button> -->

      <el-button type="info" @click="userGetAllCommunity" plain v-if="userBaseSetUp.communityUpdateAutomatic == 0"><span
          class="el-icon-refresh"></span></el-button>
      <el-button type="info" @click="openSetUpBtn"><span class="el-icon-s-tools"></span></el-button>


    </div>


    <!-- 弹出的页面内容 -->
    <el-dialog :visible.sync="openSetUp" :width="'800px'">
      <div slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-s-tools" style="margin-right:10px"></i>
        </span>
        <span class="title-age">社区设置</span>
      </div>
      <div class="setUp">
        <div class="block ">
          <span class="demonstration">每次刷新显示条数:{{ updateUserBaseSetUp.communityTotal }}</span>
          <span class="demonstration setUpPrompt" v-if="updateUserBaseSetUp.communityTotal >= 30">注意!显示条数过高会造成卡顿</span>
          <el-slider v-model="updateUserBaseSetUp.communityTotal" :step="10" :max="50" show-stops>
          </el-slider>
        </div>

        <div class="setUpInterval">
          <span class="demonstration" style="">数据更新方式</span><br>
          <el-radio-group v-model="updateUserBaseSetUp.communityUpdateAutomatic" style="margin-top: 15px;">
            <el-radio-button :label="1">自动</el-radio-button>
            <el-radio-button :label="0">手动</el-radio-button>
          </el-radio-group>
        </div>

        <div class="block setUpInterval" v-if="updateUserBaseSetUp.communityUpdateAutomatic == 1">
          <span class="demonstration">自动刷新时间间隔:{{ updateUserBaseSetUp.communityUpdateTime }}(秒)</span>
          <span class="demonstration setUpPrompt"
            v-if="updateUserBaseSetUp.communityUpdateTime <= 5">注意!刷新频率过高会造成卡顿</span>
          <el-slider v-model="updateUserBaseSetUp.communityUpdateTime" :step="1" :min="3" :max="10" show-stops>
          </el-slider>
        </div>

        <div class="setUpInterval">
          <span class="demonstration" style="">是否加载成员列表</span><br>
          <el-radio-group v-model="updateUserBaseSetUp.communityOpenUserList" style="margin-top: 15px;">
            <el-radio-button :label="1">加载</el-radio-button>
            <el-radio-button :label="0">不加载</el-radio-button>
          </el-radio-group>
        </div>

        <div class="setUpInterval" style="margin-left: 70%;">
          <el-button type="info" @click="openSetUp = false">取消</el-button>
          <el-button type="danger" @click="sureUpdateSetUp">确认</el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>
  
<script>
import _myContent from '../../../public/js/global_variable'
import { $findMyCommunitySetUp } from '@/assets/api/user.js'
import { $updateByCommunitySetUp } from '@/assets/api/user.js'
import { $findAllCommunityFirst } from '@/assets/api/user.js'
import { $findAllCommunity } from '@/assets/api/user.js'
import { $addCommunity } from '@/assets/api/user.js'
import { $deleteCommunityById } from '@/assets/api/user.js'
import { $findAccountPublicById } from '@/assets/api/user.js'
import { $communityUserMess } from '@/assets/api/user.js'
import { $deleteBan } from '@/assets/api/user.js'
import { $addBan } from '@/assets/api/user.js'
export default {

  name: 'App',
  data() {
    return {
      uploadHeaders:{"token":JSON.parse(sessionStorage.getItem("token"))},//文件上传token请求
      userBaseSetUp: {//用户基础设置
        communityTotal: 10,//页面请求数
        communityUpdateTime: 7,//修改的时间间隔
        communityOpenUserList: 0,//是否打开用户列表
        communityUpdateAutomatic: 1,//是否为自动更新
      },
      updateUserBaseSetUp: {
        communityTotal: 10,//页面请求数
        communityUpdateTime: 7,//修改的时间间隔
        communityOpenUserList: 0,//是否打开用户列表
        communityUpdateAutomatic: 1,//是否为自动更新
      },
      openSetUp: false,//用户色设置界面
      startId: 10,//页面请求起点id
      search: '',
      allUserList: [],//所有用户的列表
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      myUserType: this.$myContent.userMess.userType,
      contextMenuData: {
        menuName: "demo",
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "delete", // Binding events(绑定事件)
            // icoName: "el-icon-delete-solid", // icon (icon图标 )
            btnName: "撤回" // The name of the menu option (菜单名称)
          },
        ]
      },
      userMenuData: {
        menuName: "@user",
        axis: {
          x: null,
          y: null
        },
        menulists: [
          {
            fnHandler: "callOne", // Binding events(绑定事件)
            icoName: "fa fa-home fa-fw", // icon (icon图标 )
            btnName: "@"// The name of the menu option (菜单名称)
          },
        ]
      },
      fileList: [],
      communitys: [],
      content: "",
      MyCommentSend: {
        uid: JSON.parse(sessionStorage.getItem("uid")),
        content: '',
        type: '',
        avatar: this.$myContent.userMess.avatar,
        fileName: '',
      },
      isFileTypeError: false,//是否是人为删除已经删上传的文件
      nowScrollHeight: 0,//当前信息框的信息总长度，用来判断是否要将下拉条重置到最下面
      commentOperateId: '',
      commentOperateUId: '',
      lookOneUserMess: {
        nickName: '@',
      },
      visible: false,
      communityRenew: null,//自动更新定时器
    }
  },
  created() {
    this.userSetUp();
  },
  mounted() {
    //页面挂载完成时调用
    // this.scrollToBottom()
    //this.userSetUp();
  },

  updated() {
    //页面更新后调用
    this.MyCommentSend.avatar = this.$myContent.userMess.avatar;
    this.myUserType = this.$myContent.userMess.userType;
    this.scrollToBottom()
  },
  methods: {

    //用户基础设置
    async userSetUp() {
      this.myUserType = this.$myContent.userMess.userType;
      await $findMyCommunitySetUp(this.MyCommentSend.uid).then((res) => {
        if (res.data.success) {
          this.userBaseSetUp = res.data.data.findAllCommunity;
          this.getAllCommunity();
          if (this.userBaseSetUp.communityOpenUserList == 1) {
            this.getCommunityUserMess();
          }
          this.AutomaticUpdate();
        } else {
          this.message(res);
        }
      }).catch((err) => {
        console.log(err);
      })
    },

    //用户设置界面打开
    openSetUpBtn() {
      this.openSetUp = true;
      //修改数据初始化
      $findMyCommunitySetUp(this.MyCommentSend.uid).then((res) => {
        if (res.data.success) {
          this.updateUserBaseSetUp = res.data.data.findAllCommunity;
        } else {
          this.message(res);
        }
      }).catch((err) => {
        console.log(err);
      })
    },

    //确认信息修改
    sureUpdateSetUp() {
      this.$confirm('是否确认修改当前设置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.openSetUp = false;
        this.updateUserBaseSetUp.uid = this.MyCommentSend.uid,
          $updateByCommunitySetUp(this.updateUserBaseSetUp).then((res) => {
            this.message(res);
            if (res.data.success) {
              location.reload();
            }
          }).catch(() => {
        console.log(err);
      });
      }).catch(() => { });
    },

    //刷新请求社区讨论信息
    getAllCommunity() {
      //console.log("thisTotal = " + this.userBaseSetUp.communityTotal);
      $findAllCommunityFirst(this.userBaseSetUp.communityTotal).then((res) => {
        if (res.data.success) {
          this.communitys = res.data.data.findAllCommunity;
          this.startId = this.communitys[this.userBaseSetUp.communityTotal - 1].id;
          //初始化请求，将数据保存到session中
          sessionStorage.setItem("allCommunity", JSON.stringify(res.data.data.findAllCommunity));

        } else {
          this.$message({
            type: 'error',
            message: '请检查网络',
          })
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    //用户手动刷新请求社区讨论信息
    userGetAllCommunity() {
      $findAllCommunityFirst(this.userBaseSetUp.communityTotal).then((res) => {
        if (res.data.success) {
          this.communitys = res.data.data.findAllCommunity;
          this.startId = this.communitys[this.userBaseSetUp.communityTotal - 1].id;
          //初始化请求，将数据保存到session中
          sessionStorage.setItem("allCommunity", JSON.stringify(res.data.data.findAllCommunity));
          this.message(res);
        } else {
          this.$message({
            type: 'error',
            message: '请检查网络',
          })
        }
      }).catch((err) => {
        console.log(err);
      })
    },

    //自动请求社区讨论信息
    automaticGetAllCommunity() {
      $findAllCommunity(this.startId, this.userBaseSetUp.communityTotal).then((res) => {
        if (res.data.success) {
          var communityLength = res.data.data.findAllCommunity.length;
          for (var i = 0; i < communityLength; i++) {
            this.communitys.splice(0, 1);
            this.communitys.push(res.data.data.findAllCommunity[i]);
          }
          // console.log( this.communitys);
          this.startId = this.communitys[this.userBaseSetUp.communityTotal - 1].id;//更新请求数据
        } else {
          this.$message({
            type: 'error',
            message: '请检查网络',
          })
        }
      }).catch((err) => {
        console.log(err);
      })
    },


    //发送信息
    sendInput() {
      if (this.MyCommentSend.content == "") {
        this.$message({
          type: 'warning',
          message: "输入内容不能为空"
        });
        return;
      }
      this.MyCommentSend.type = 0;
      $addCommunity(this.MyCommentSend).then((res) => {
        if (res.data.success) {
          this.automaticGetAllCommunity();
        }
      }).catch((err) => {
        console.log(err);
      })
      this.MyCommentSend.content = "";

    },


    //自动更新
    AutomaticUpdate() {
      var n = 0;
      if (this.communityRenew) {
        window.clearInterval(this.communityRenew);
        this.communityRenew = null;
      }
      if (this.userBaseSetUp.communityUpdateAutomatic == 1) {//用户设置是否为自动刷新
        this.communityRenew = setInterval(() => {
          if (this.userBaseSetUp.communityUpdateAutomatic == 1) {//用户设置是否为自动刷新
            n++;
            if (n == 5) {
              setTimeout(() => {
                n = 0;
                this.getAllCommunity();
              }, 0)
            } else {
              setTimeout(() => {
                this.automaticGetAllCommunity();
              }, 0)
            }
          } else {
            window.clearInterval(this.communityRenew);
          }
        }, this.userBaseSetUp.communityUpdateTime * 1000);
        this.$once('hook:beforeDestroy', () => {
          window.clearInterval(this.communityRenew);
        })
      }

    },

    //更新社区用户列表
    getCommunityUserMess() {
      $communityUserMess().then((res) => {
        if (res.data.success) {
          this.allUserList = res.data.data.communityUserMess;
        } else {
          this.message(res);
        }
      }).catch((err) =>{
        console.log(err);
      })
    
    },

    userUpdateUserList() {
      $communityUserMess().then((res) => {
        if (res.data.success) {
          this.allUserList = res.data.data.communityUserMess;
          this.$message({
            type: 'success',
            message: '成功更新',
          })
        } else {
          this.$message({
            type: 'error',
            message: '网咯异常'
          })
        }
      })
    },




    handleEdit(index, row) {
      if (row.ban) {
        this.$confirm('是否解除昵称为\'' + row.nickName + '\'用户的禁言?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $deleteBan(row.id).then((res) => {
            this.$message({
              type: res.data.success ? 'success' : 'error',
              message: res.data.message,
            })
            if (res.data.success) {
              this.getCommunityUserMess();
            }
          })
        }).catch(() => { });
      } else {
        this.$confirm('是否禁言昵称为\'' + row.nickName + '\'的用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $addBan(row.id).then((res) => {
            this.$message({
              type: res.data.success ? 'success' : 'error',
              message: res.data.message,
            })
            if (res.data.success) {
              this.getCommunityUserMess();
            }
          })
        }).catch(() => { });
      }


    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    communitysCreatedTime(index) {
      return index.createdTime;
    },
    isCommunitysCreatedTime(index, communitys) {
      if (index == 0) {
        return true;
      } else {
        var thisTime = communitys[index].createdTime;
        var preTime = communitys[index - 1].createdTime;
        let thisDate = new Date(thisTime);
        let preTDate = new Date(preTime);
        const diff = thisDate.getTime() - preTDate.getTime();
        if (diff / (1000 * 60 * 30) >= 1) {
          return true;
        } else {
          false
        }
      }
    },
    fileName(name) {
      if (name.length > 10) {
        var end = name.lastIndexOf('.')
        var fileName = name.substr(0, 5);
        var typeName = name.substr(end);
        name = fileName + "..." + typeName;
      }

      return name
    },
    deleteComment() {
      $deleteCommunityById(this.commentOperateId, this.commentOperateUId).then((res) => {
        this.message(res);
        this.getAllCommunity();
      })
    },
    showMenu(id, uid) {
      if (uid != this.MyCommentSend.uid && this.myUserType == 0) {
        return;
      }
      this.commentOperateId = id;
      this.commentOperateUId = uid;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y
      };
    },
    callOne() {
      this.MyCommentSend.content = "@" + this.lookOneUserMess.nickName;
    },

    lookUserMenu(uid, event) {
      if (event.button == 0) {
        sessionStorage.setItem("lookUserMessById", uid);
        this.$router.push({
          name: 'publicBaseMess',
        })
      }

    },
    userMenu(uid) {
      $findAccountPublicById(uid).then((res) => {
        if (res.data.success) {
          this.lookOneUserMess = res.data.data.findAccountPublicById;
        }
      }).catch((err) =>{
        console.log(err);
      })
      event.preventDefault();
      var x = event.clientX - 10;
      var y = event.clientY;
      // Get the current location
      this.userMenuData.axis = {
        x,
        y
      };
    },
    test(id, event) {
      if (event.button == 0) {
        alert("你点了左键" + id);
      } else if (event.button == 2) {
        alert("你点了右键" + id);
      }
    },
    uploadFile(url) {
      window.location.href = url
    },
    beforeUpload(file) {
      if (file.type != "image/jpeg" && file.type != "image/png") {
        this.$message({
          type: "warning",
          message: '文件格式有误，请发送jpg或png格式的图片'
        })
        this.isFileTypeError = true;
        return false;
      };
    },
    submitUpload() {
      this.$refs.upload.submit();
    },

    submitUploadFile() {
      this.$refs.uploadFile.submit();
    },
    handleRemove(file, fileList) {
      if (!this.isFileTypeError) {
      } else {
        this.isFileTypeError = false;
      }

    },

    handleRemoveFile(file, fileList) {
      if (!this.isFileTypeError) {
      } else {
        this.isFileTypeError = false;
      }

    },
    onSuccessFile(response, file, fileList) {
      if (response.success) {
        this.MyCommentSend.type = 2;
        this.MyCommentSend.content = response.data.resPath;
        $addCommunity(this.MyCommentSend).then((res) => {
          if (res.data.success) {
            this.getAllCommunity();
            this.MyCommentSend.content = "";
            this.fileList = [];
          }
        }).catch((err) =>{
          console.log(err);
        })
       
      } else {
        this.$message({
          type: 'error',
          message: response.message,
        })
        return false;
      }
    },
    fileBeforeUpload(file) {

      console.log(file);
      this.MyCommentSend.fileName = file.name;
    },
    onSuccess(response, file, fileList) {
      if (response.success) {
        this.MyCommentSend.type = 1;
        this.MyCommentSend.content = response.data.resPath;
        $addCommunity(this.MyCommentSend).then((res) => {
          if (res.data.success) {
            this.getAllCommunity();
            this.MyCommentSend.content = "";
            this.fileList = [];
          }
        }).catch((err) =>{
          console.log(err);
        })
       
      } else {
        this.$message({
          type: 'error',
          message: response.message,
        })
        return false;
      }
    },
    handlePreview(file) {
    },
    scrollToBottom() {
      let mess = this.$refs.mess;    //通过$refs获取到该元素
      if (this.nowScrollHeight === mess.scrollHeight) {
        return;
      }
      else if (mess.scrollTop >= mess.scrollHeight - 1000 && this.nowScrollHeight != 0) {
        return;
      }
      mess.scrollTop = mess.scrollHeight;
      this.nowScrollHeight = mess.scrollHeight;
    },
  }

}
</script>
  
<style scoped>
@media screen and (max-width:800px) {
  .usetListDiv {
    display: none;
  }
}

.mess {
  height: 95%;
  min-height: 400px;
  overflow-y: auto;
  padding: 10px;
  min-width: 500px;
}

.mess2 {
  display: inline-block;
  height: 95%;
  width: 70%;
  min-height: 400px;

  overflow-y: auto;
  min-width: 300px;
}

.usetListDiv {
  width: 28%;
  float: right;
  margin-right: 0%;
}

.messDiv {
  margin: 0 auto;
  width: 70%;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}

.messDiv2 {

  margin: 0 auto;
  width: 99%;
  float: left;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}

.setUpInterval {
  margin-top: 30px;
}

.setUpPrompt {
  color: rgb(230, 162, 60);
  float: right;
}

.setUp {
  padding: 70px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.communitysInformation {
  height: 100%;
}

.left {
  float: left;
}

.popover {
  margin-left: 3px;
}

.leftImg {
  float: left;
}

.rigthImg {
  float: right;
}


.imgUpload {
  border: solid 1px #cccccc;
  padding: 5px;
}

.upload-demo {
  margin: 0 auto;
  margin-left: 150px;
}



.contianer {
  padding: 20px;
  height: 87%;
  min-height: 550px;
}

.sendCount {
  margin-left: 17%;
  margin-top: 20px;
  height: 40px;
  line-height: 30px;

}

.sendCount2 {
  margin-left: 1%;
  margin-top: 20px;
  height: 40px;
  line-height: 30px;

}



.commentMess {
  margin-top: 15px;
}

.leftText {
  float: left;
  background-color: #bce9ea;
}

.rigthText {
  float: right;
  background-color: #47dfe1;
}

.commontText {
  max-width: 60%;
  min-height: 20px;
  border-radius: 10px;
  padding: 10px;

  .text {
    line-height: 20px;
    top: 8px;
    margin-left: 10px;
    margin-right: 10px;
  }

}

.messTable {
  margin: 0 auto;
  min-width: 90%;
}


.commontImg {
  height: 40px;
  width: 40px;
  margin-left: 5px;
  margin-right: 5px;
}

tr {}


.sendInput {
  width: 40%;
  margin-right: 10px;
}

div::-webkit-scrollbar {
  width: 6px;
}

div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

div::-webkit-scrollbar-thumb {
  background: #47dfe1;
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background: #47dfe1;
}
</style>